<template>
<view class="page">
	<view class="body"> 
		<view class="send-form-wrap">	
			<view class="mod-grid m-b2">
				<view class="picker-btn" @click="showPopup('show','isShowZw')">
					<text class="f-wb">选择作物</text>
					<view class="">
						<text>{{params.plant||'请选择'}}</text>
						<text class="iconfont f-s28">&#xe8d4;</text>
					</view>						
				</view>				 
			</view>	
			
			
			<view class="mod-grid m-b2">
				<view class="label f-wb">描述您的问题</view>
				<textarea placeholder="输入您的问题,越详细专家解答越精确" class="textarea-describe" v-model="params.problem"></textarea>  
			</view>
			<view class="mod-grid m-b2">
				<view class="picker-btn">
					<text class="f-wb">地点</text>
					<view class="flex">
						<input type="text" placeholder="输入发生地点" v-model="params.address">  
					</view>	
					
				</view> 
			</view>
			
			<view class="mod-grid m-b2">
				<view class="picker-btn">
					<text class="f-wb">发生面积</text>
					<view class="flex">
						<input type="text" placeholder="输入发生面积" v-model="params.area"> 
						<text class="f-s28">亩</text>
					</view>	
					
				</view> 
			</view>			
			
			<view class="mod-grid m-b2">
				<view class="picker-wrap">
					<picker mode="date" @change="changeDate">
						<view class="picker-btn">
							<text class="f-wb">处理日期</text>
							<view class="">
								<text class="f-s28">{{params.service_date||'请选择'}}</text>
								<text class="iconfont f-s28">&#xe8d4;</text>
							</view>	
							
						</view> 
					</picker>
				</view>
			</view>
			
			<view class="mod-grid m-b2">
				<view class="picker-wrap">
					<picker mode="selector" :range="service_types" range-key="name" @change="changeservicetypes">
						<view class="picker-btn">
							<text class="f-wb">申请服务</text>
							<view class="">
								<text class="f-s28">{{params.service_type_name||'选择服务类型'}}</text>
								<text class="iconfont f-s28">&#xe8d4;</text>
							</view>								
						</view> 
					</picker>
				</view>	 
			</view>	
			 
		</view>			
	</view>	
	<view class="footer">
		<view class="fix-wrap">
			<view class="btn" @click="submit">
				<view class="f-s32">提 交</view> 
			</view>	
		</view>
	</view>	
	
	<view v-if="flag.isFullPage" class="full-fix-page">
		<template v-if="flag.isShowZw">
			<view class="picker-bottom-wrap a-fadeinB">
				<view class="picker-hd">
					<view class="cancle" @click="showPopup('hide');params.plant='';params.selectplant=''">取消</view>
					<view class="confirm" @click="confirmplant">确定</view>
				</view>
				<view class="scroll-y">
					<scroll-view scroll-y="true">
						<view class="list">
							<view class="item" :class="{'active':params.selectplant==item.name}" v-for="(item,index) in plants" :key="index" @click="selectplant(index)">
								<view class="icon"><image :src="web_host+'/static/icons/'+item.id+'.png'" mode="widthFix"></image></view>	
								<view class="name split">{{item.name}}</view>	
							</view>
						</view>				
					</scroll-view>
				</view>	 
			</view>
		</template>
	</view>
	
</view>
</template>

<script>  
import {HTTP_REQUEST_URL} from '../../config.js'
export default{
	name:'demo',
	data(){
		return{ 
			isLogin:false,
			loadingState:{
				default:true,
				loading:false,
				completed:false
			},
			service_types:[],
			params:{
				selectplant:'',
				plant:'',
				problem:'',
				service_type:'',
				service_type_name:'',
				service_date:'',
				area:'',
				address:''
			},
			flag:{
				isFullPage:false,
				isShowZw:false
			},
			plants:[], 
			web_host:HTTP_REQUEST_URL
			
		}
	},
	async onShow() {
		
	},
	async onLoad(params) { 
		this.servicetypes();
		this.croptypes();
	},
	onReachBottom(){
		 
	},
	methods:{
		 
		async servicetypes(){
			let res=await this.$api.user_api.servicetypes(); 
			if(res.data.code==0){
				this.service_types=res.data.data;
			}
		},
		
		async croptypes(){
			let res=await this.$api.user_api.croptypes();
			console.log(res)
			if(res.data.code==0){
				this.plants=res.data.data;
			}
		},
		
		changeservicetypes(e){ 
			let idx=e.detail.value;
			this.params.service_type=this.service_types[idx].id;
			this.params.service_type_name=this.service_types[idx].name;
			
		},
		
		changeDate(e){ 
			this.params.service_date=e.detail.value;
		},
		
		selectplant(idx){
			let item=this.plants[idx];
			this.params.selectplant=item.name; 
		},
		
		confirmplant(){
			this.params.plant=this.params.selectplant;
			this.showPopup('hide')
		},
		
		async submit(){
			let {plant,	problem,service_type,service_date,area,	address}=this.params; 
			let res=await this.$api.user_api.serviceapply({plant,problem,service_type,service_date,area,address})
			if(res.data.code==0){
				uni.navigateBack({
					delta:1
				})
				this.$store.commit('sq_list_update',1)
			} 
		},
		
		// 打开弹窗
		showPopup(t, n) { 
			if (t == 'show') { 
				this.flag.isFullPage = true;
				this.flag[n] = true;
			} else if (t == 'hide') {
				if(n){ 
					this.flag[n] = false;
				}else{
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}					
			}
		},
		
	},
	computed:{
		 
		
	},
	watch:{
		 
	},
	components:{ 
	}
}
</script>

<style scoped lang="less">
	.send-form-wrap{
		padding: 20rpx 0;
		width: 96%;
		margin: 0 auto;
	}
	.radio-wrapp{
		display: flex;
		align-items: center;
	}
	.picker-wrap{
		padding: 30rpx 0;
		// border-bottom: 2rpx solid #eee;
	}
	.picker-btn{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx; 
	}
	.scroll-y{
		height: 630rpx;
		overflow: hidden; 
		scroll-view{
			height:100%;
		}
		.list{
			display: flex;
			flex-wrap: wrap;
			padding: 20rpx;
			.item{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 22%;
				height: 150rpx;
				margin: 0 10rpx 20rpx;
				background: #f5f5f5;
				border-radius: 8rpx;
				color: #666;
				font-size: 28rpx; 
				image{
					width: 50rpx;
					height: 50rpx;					
				}
				.name{
					width: 80%;
					text-align: center;
				}
			}
			.active{
				background: #00aa7f;
				color: #fff;
			}
		}
	}
	.input-btn{ 
		display: flex; 
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		margin: 30rpx 0 0 0;
		background: #f5f5f5;
		border-radius: 10rpx; 
		font-size: 32rpx; 
	}
	.mod-grid{ 		
		padding: 30rpx 30rpx 30rpx 30rpx;
		background: #fff;
		border-radius: 10rpx;
		.label{
			font-size: 32rpx;
		}
		.textarea-describe{
			width: 96%;
			padding: 10rpx 2%;
			margin: 20rpx 0;
			background: #f5f5f5;
			border-radius: 10rpx;
			font-size: 28rpx;
		}
		.upload-pic-item{
			padding: 0;
		}
		.list{
			.item{
				display: flex;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 2rpx solid #eee;
				.icon{
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
					background: #f5f5f5;
					border-radius: 10rpx;
				}
				.name{
					font-size: 30rpx;
					font-weight: bold;
				}
			}
			
		}
	}
	.list-wrap{ 
		display: flex;
		flex-wrap: wrap;
		padding:20rpx 1% 10rpx;
		.item{ 
			width: 48%;
			margin:0 1% 20rpx;  
			background:#fff;
			border-radius: 15rpx;
			overflow: hidden;
			.pic{
				width: 100%;
				image{
					width: 100%;
				}
			}
			.title{
				padding:0 10rpx;
				margin:20rpx 0;
				font-size: 28rpx;
			}
			.info{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding:0 10rpx;
				margin-bottom: 10rpx;
				.price{ 
					i{
						font-size: 24rpx;
						font-style: initial;
					}
					font-size: 32rpx;
					color:#f00;
				}
				.sell-num{
					font-size:24rpx;
					color:#999;					 
				}
			}
		}
	}
	.footer{
		height: 150rpx;
		.fix-wrap{
			height: 150rpx;
			background: none;
			border: 0 none;
		}
		.btn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 96%;
			height: 90rpx;
			margin: 20rpx auto;
			background: #00aa7f;
			border-radius: 8rpx;
			color: #fff;
			text-align: center;
		}
	}
	
</style>
